/*
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-13 17:24:15
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-16 11:41:31
 * @FilePath: \vue3_admin_template\project\src\utils\mapbox\popup.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
export function mapboxPopup({ map, position, value, type }) {
  let el = document.createElement('div')
  el.id = 'markerId'
  el.style.backgroundImage = 'url(' + getAssetsFile('echart.png') + ')'
  el.style.width = 100 + 'px'
  el.style.height = 100 + 'px'
  let LngLat = [position.lng, position.lat]
  const option = {
    closeOnClick: false,
    closeButton: true,
    anchor: 'bottom',
    offset: [0, -20],
  }

  let popup = new mapboxgl.Popup(option)
    .setLngLat(LngLat)
    .setMaxWidth('300px')
    .setText(`${type == 'draw_line_string' ? '长度' : '面积'}:${value}`)
  let markers = new mapboxgl.Marker(el)
    .setLngLat(LngLat)
    .setPopup(popup)
    .addTo(map)
}

//获取图片路径
function getAssetsFile(imgName) {
  return new URL(`../assets/${imgName}`, import.meta.url).href
}
